<template>
  <el-container style="height: 100vh; background: #f5f6fa;">
    <el-aside width="220px" style="background: #fff; box-shadow: 2px 0 8px #f0f1f2;">
      <div style="height: 60px; display: flex; align-items: center; justify-content: center;">
        <img src="/logo.svg" alt="logo" style="height: 40px; margin-right: 8px;" />
        <span style="font-weight: bold; font-size: 20px;">Baidu平台</span>
      </div>
      <el-menu :default-active="$route.path" router>
        <el-menu-item index="/">
          <el-icon><HomeFilled /></el-icon>主界面
        </el-menu-item>
        <el-menu-item index="/profile">
          <el-icon><User /></el-icon>个人中心
        </el-menu-item>
        <el-menu-item index="/toolbox">
          <el-icon><Tools /></el-icon>工具箱
        </el-menu-item>
        <el-menu-item index="/developer">
          <el-icon><Cpu /></el-icon>开发者
        </el-menu-item>
        <el-menu-item index="/projects">
          <el-icon><Folder /></el-icon>我的项目
        </el-menu-item>
        <el-menu-item index="/data">
          <el-icon><DataAnalysis /></el-icon>数据
        </el-menu-item>
        <el-menu-item index="/database">
          <el-icon><Collection /></el-icon>数据库
        </el-menu-item>
        <el-menu-item index="/models">
          <el-icon><Histogram /></el-icon>模型库
        </el-menu-item>
        <el-menu-item index="/community">
          <el-icon><ChatDotRound /></el-icon>社区
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="background: #fff; box-shadow: 0 2px 8px #f0f1f2; display: flex; justify-content: space-between; align-items: center;">
        <div></div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar icon="el-icon-user" /> 测试用户 <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main style="padding: 32px;">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { HomeFilled, User, Tools, Cpu, Folder, DataAnalysis, Collection, Histogram, ChatDotRound, ArrowDown } from '@element-plus/icons-vue'
</script>
